<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <script src="china.js"></script>
</head>
<body>
    <div id="container" style="height: 800px;width:1200px;background:white;margin:20px 0 0;"></div>
    <script>
        let dataList = [
            { name: '澳门', value: 0 },
            { name: '香港', value: 11 },
            { name: '台湾', value: 2 },
            { name: '新疆', value: 0 },
            { name: '宁夏', value: 0 },
            { name: '青海', value: 0 },
            { name: '甘肃', value: 0 },
            { name: '陕西', value: 11 },
            { name: '西藏', value: 0 },
            { name: '云南', value: 0 },
            { name: '贵州', value: 110 },
            { name: '四川', value: 0 },
            { name: '重庆', value: 2 },
            { name: '海南', value: 0 },
            { name: '广西', value: 0 },
            { name: '广东', value: 1110 },
            { name: '湖南', value: 0 },
            { name: '湖北', value: 2 },
            { name: '河南', value: 0 },
            { name: '山东', value: 0 },
            { name: '江西', value: 0 },
            { name: '福建', value: 0 },
            { name: '安徽', value: 0 },
            { name: '浙江', value: 0 },
            { name: '江苏', value: 0 },
            { name: '上海', value: 11 },
            { name: '黑龙江', value: 0 },
            { name: '吉林', value: 0 },
            { name: '辽宁', value: 0 },
            { name: '内蒙古', value: 0 },
            { name: '山西', value: 0 },
            { name: '河北', value: 0 },
            { name: '天津', value: 0 },
            { name: '北京', value: 101 }
            ];

        var option = {
        tooltip: {
            triggerOn: "click",
            formatter: function (e, t, n) {
                return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
            }
        },
        visualMap: {
            min: 0,
            max: 100000,
            left: 26,
            bottom: 40,
            showLabel: true,
            text: ["高", "低"],
            pieces: [{
                gt: 200,
                label: "> 200人",
                color: "#7f1100"
            }, {
                gte: 100,
                lte: 200,
                label: "100 - 200人",
                color: "#ff5428"
            }, {
                gte: 10,
                lt: 100,
                label: "10 - 100人",
                color: "#ff8c71"
            }, {
                gte: 1,
                lt: 10,
                label: "1-10人",
                color: "#ffd768"
            }, {
                lte: 0,
                label: "0人",
                color: "#BEDAEE"
            }],
            show: true
        },
        geo: {
            map: "china",
            roam: true,
            scaleLimit: {
                min: 1,
                max: 2
            },
            zoom: 1.13,
            top: 50,
            label: {
                    show: true,
                    fontSize: "14",
                    color: "rgba(0,0,0,0.7)"
            },
            itemStyle: {
                borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
                areaColor: "#f2d5ad",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0
            }
        },
        series: [{
            name: "确诊病例",
            type: "map",
            geoIndex: 0,
            data: dataList
        }]
        };

        
        var myChart = echarts.init(document.getElementById('container'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);

    </script>

</body>
</html>